<template>
  <div class="app-container home">
    <el-row>
      <el-col :span="16">
        <el-col :span="4">

        </el-col>
        <el-col :span="20">
          <h2>{{greeting}}，{{ user.userName }}，{{greetingTips}}</h2>
          <h2>
             {{yearMonthDay}}  {{currentTime}}  {{weekDay}}
          </h2>
        </el-col>
      </el-col>
      <el-col :span="8"></el-col>
    </el-row>

    <el-divider />

    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>今日开标</span>
          </div>
          <div class="body" style="height: 350px;">
            <el-table v-loading="loading" :data="projectList" @row-click="handleProjectClick">
              <el-table-column label="#" align="left" width="30">
                <!-- 自定义索引 (可选，如果需要从1开始计数) -->
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="项目名称" align="left" prop="projectName" />
              <el-table-column label="项目编号" align="left" prop="projectCode" />
              <el-table-column label="开标时间" align="left" prop="projectBidOpenTime" width="150"/>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>通知公告</span>
          </div>
          <div class="body" style="height: 350px;">
            <el-table v-loading="loading" :data="noticeList" @row-click="handleNoticeClick">
              <el-table-column label="#" align="left" width="30">
                <!-- 自定义索引 (可选，如果需要从1开始计数) -->
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="标题" align="left" prop="noticeTitle"/>
              <el-table-column label="发布时间" align="left" prop="createTime" width="150"/>
            </el-table>
          </div>

        </el-card>
      </el-col>

    </el-row>

    <el-dialog :title="noticeTitle" :visible.sync="noticeDetailOpen" append-to-body>
      <div slot="title" style="margin-top: 20px;">
          <div class="avue-crud__dialog__header" style="text-align: center;">
            <span class="el-dialog__title">
                    {{ noticeDetai.noticeTitle }}
            </span>
          </div>
      </div>
      <div style="margin-bottom:10px;">
        <el-tag size="mini" effect="dark" type="warning" v-if="noticeDetai.noticeType==2">公告</el-tag>
        <el-tag size="mini" effect="dark" v-else>信息</el-tag>
        <span style="margin-left:20px;">{{noticeDetai.createTime}}</span>
      </div>
      <div v-html="noticeDetai.noticeContent" class="ql-editor"></div>
      <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="closeNoticeDetail"> 关 闭 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { listsProject, getProject} from "@/api/system/project";
import { listNotice, getNotice} from "@/api/system/notice";
import { getUserProfile } from "@/api/system/user";
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.8",
      user: {},
      roleGroup: {},
      postGroup: {},
      activeTab: "userinfo",
      greetingTips: '',
      currentTime: '',
      yearMonthDay: '',
      weekDay: '',
      bidroomList:[],
      noticeList: [],
      noticeDetai:{},
      noticeTitle: '',
      noticeDetailOpen: false,
      projectList: [],
      projectDetai:{},
      projectTitle: '',
      projectDetailOpen: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      projectParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  computed: {
    greeting() {
      const hour = new Date().getHours(); // 获取当前小时数
      if (hour < 12) {
        this.greetingTips= '开始您一天的工作吧!';
        return '早上好';
      } else if (hour >= 12 && hour < 14) {
        this.greetingTips= '‌愿你的工作顺利，‌心情愉快。‌';
        return '中午好';
      } else if (hour >= 14 && hour < 18) {
        this.greetingTips= '愿你忙碌中不失乐趣！‌';
        return '下午好';
      } else {
        this.greetingTips= '愿您拥有一个美好的夜晚。‌';
        return '晚上好';
      }
    }
  },
  created() {
    this.getUser();
    this.updateTime();
    this.getYearMonthDay();
    this.getWeekDay();
    this.getNoticeList();
    this.getProjectList();
  },
  methods: {
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
        this.roleGroup = response.roleGroup;
        this.postGroup = response.postGroup;
      });
    },
    getNoticeList(){
      this.loading = true;
      listNotice(this.queryParams).then(response => {
        this.noticeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getProjectList(){
      this.loading = true;
      this.projectParams.params = typeof (this.projectParams.params) === 'object' && this.projectParams.params !== null && !Array.isArray(this.projectParams.params) ? this.projectParams.params : {};
      this.projectParams.params['beginProjectBidOpenTime'] = this.getNowFormatDate()+" "+"00:00:00";
      this.projectParams.params['endProjectBidOpenTime'] = this.getNowFormatDate()+" "+"23:59:49";
      listsProject(this.projectParams).then(response => {
        this.projectList = response.data;
        this.loading = false;
      });
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    //获取年月日的方法
    getYearMonthDay() {
      const today = new Date();
      // 获取当前时间(today)的年份
      const year = today.getFullYear();
      // 获取月份
      const month = String(today.getMonth() + 1).padStart(2, '0');
      // 获取当前日
      const day = String(today.getDate()).padStart(2, '0');
      // 得到年月日
      this.yearMonthDay =  `${year}年${month}月${day}日`; //打印当前日期
    },
    getWeekDay(){
      let days = ['周日','周一','周二','周三','周四','周五','周六'];
      let today = new Date();
      let weekday = today.getDay();
      this.weekDay = days[weekday];
    },
    updateTime() {
      this.currentTime = new Date().toLocaleTimeString();
      setTimeout(this.updateTime, 1000); // 每秒更新时间
    },
    //获取当前日期函数
    getNowFormatDate() {
      let date = new Date(),
          year = date.getFullYear(), //获取完整的年份(4位)
          month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
          strDate = date.getDate(); // 获取当前日(1-31)
        if (month < 10) month = `0${month}`; // 如果月份是个位数，在前面补0
        if (strDate < 10) strDate = `0${strDate}`; // 如果日是个位数，在前面补0
        return `${year}-${month}-${strDate}`;
    },
    // 取消按钮
    closeNoticeDetail() {
      this.noticeTitle = "详情";
      this.noticeDetailOpen = false;
    },
    handleNoticeClick(row, column, event) {
      // 在这里处理你的点击事件
      this.noticeDetai = row;
      this.noticeDetailOpen = true;
    },
    handleProjectClick(row, column, event) {
      // 在这里处理你的点击事件
      this.projectDetai = row;
      this.projectDetailOpen = true;
    },
  },
  beforeDestroy() {
    // 清除定时器
    clearTimeout(this.updateTime);
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

